<template>
    <div class="page">
      <span>{{query.current}}/{{query.pages}}</span>
      <a v-if="isFirst" @click="calculate(1)" @mouseenter="mouseStart($event)" @mouseleave="mouseEnd($event)">« 首页</a>
      <a v-if="isFirst" @click="calculate(query.current - 1)" @mouseenter="mouseStart($event)" @mouseleave="mouseEnd($event)">«</a>
      <a class="pageNumber"
        v-for="item in pageNumber"
        :style="query.current == item ? background : {'background': ''}"
        :key="item"
        :data-id="item"
        @click.stop="calculate(item)"
        @mouseenter="mouseStart($event)"
        @mouseleave="mouseEnd($event)">
        {{item}}
      </a>
      <a v-if="isLast" @click="calculate(query.current + 1)" @mouseenter="mouseStart($event)" @mouseleave="mouseEnd($event)">»</a>
      <a v-if="isLast" @click="calculate(query.pages)" @mouseenter="mouseStart($event)" @mouseleave="mouseEnd($event)">尾页 »</a>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Pagination',
  props: {
    query: {
      type: Object,
      default: function () {
        return {
          current: 1,
          size: 10,
          total: 20,
          pages: 2
        }
      }
    }
  },
  data () {
    return {
      background: {
        'background': '',
        'color': '#fff',
        'border': ''
      },
      isFirst: true,
      isLast: true,
      pageNumber: []
    }
  },
  mounted () {
    this.getPageNumber()
    const color = this.getBackground
    this.background.background = color
    this.background.border = '1px ' + color + ' solid'
  },
  methods: {
    // 计算页面
    calculate (page) {
      this.query.current = page
      this.isLast = page !== this.query.pages
      this.isFirst = page !== 1
      this.pageNumber = []
      var leftPage = page - 2 < 1 ? 1 : page - 2
      var rightPage = this.query.pages < page ? this.query.pages : page
      if (rightPage + 3 <= this.query.pages) {
        rightPage = rightPage + 3 === this.query.pages ? rightPage + 3 : rightPage + 3
      } else if (rightPage + 2 <= this.query.pages) {
        rightPage = rightPage + 2 === this.query.pages ? rightPage + 3 : rightPage + 1
      } else if (rightPage + 1 <= this.query.pages) {
        rightPage = rightPage + 1 === this.query.pages ? rightPage + 2 : rightPage
        leftPage = leftPage - 1 <= 0 ? 1 : leftPage - 1
      } else if (rightPage <= this.query.pages) {
        rightPage = rightPage === this.query.pages ? rightPage + 1 : rightPage
        leftPage = leftPage - 2 < 0 ? 1 : leftPage - 2
      }
      if (this.query.pages >= 5 && rightPage <= 5) {
        rightPage = 6
      }
      for (var i = leftPage; i < rightPage; i++) {
        this.pageNumber.push(i)
      }
      this.$emit('page', this.query)
    },
    mouseStart (e) {
      if (Number(e.currentTarget.getAttribute('data-id')) !== this.query.current) {
        e.currentTarget.style.background = this.getBackground
      }
    },
    mouseEnd (e) {
      if (Number(e.currentTarget.getAttribute('data-id')) !== this.query.current) {
        e.currentTarget.style.background = ''
      }
    },
    // 计算显示多少页
    getPageNumber () {
      this.pageNumber = []
      this.isLast = this.query.current !== this.query.pages && this.query.pages > 1
      this.isFirst = this.query.current !== 1 && this.query.pages > 1
      var maxPage = this.query.pages >= 5 ? 5 : this.query.pages
      for (var i = 1; i <= maxPage; i++) {
        this.pageNumber.push(i)
      }
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  }
}
</script>

<style scoped lang="stylus">
  .page
    display flex
    flex-direction row !important
    padding: 8px !important
    a, span
      display: inline
      margin: 0 5px
      min-width: 30px;
      border-radius: 2px
      -moz-border-radius: 2px
      text-align: center
      padding: 0px 8px
      line-height: 26px
      border: 1px #C2C2C2 solid
      text-decoration: none
      color: #606266
      font-size: 13px
      min-width: 30px
      font-weight: 400
      cursor pointer
    span
      cursor text
    a:hover
      color #fff
      border 1px solid #fff
      background #23BDBD
    .select
      color #fff
</style>
